<template>
    <div class="login">
        <el-dialog title="登陆" custom-class="login-form" size="tiny" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" v-model="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.userName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密　码" :label-width="formLabelWidth">
                    <el-input type="password" v-model="form.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="身　份" :label-width="formLabelWidth">
                    <el-select v-model="form.userType" placeholder="请选择您的身份">
                        <el-option label="PM" value="PM"></el-option>
                        <el-option label="RC" value="RC"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <span class="message" v-text="message"></span>
                <el-button type="primary" @click="login">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { UPDATE_LOGIN_STATE, SET_USER_INFO } from '../store/types';
    import { mapState } from 'vuex';
    import { mapActions } from 'vuex';

    export default {
        data() {
            return {
                form: {
                    userName: '',
                    password:'',
                    userType:''
                },
                formLabelWidth: '60px',
                message:""
            };
        },
        computed:{
            ...mapState({
                dialogFormVisible: state => !state.loginState
            })
        },
        methods:{
            verify(){
                if(this.form.userName === ""){
                    this.message = "用户名不能为空";
                } else if(this.form.password === "") {
                    this.message = "密码不能为空";
                } else if(this.form.userType === ""){
                    this.message = "请选择您的身份类型";
                }else {
                    this.message = "";
                    return true;
                }
            },
            login(){
                //模拟登陆
                if(this.verify()){
                    if(this.form.userName === 'abc'){
                        this.$cookie.set('token','abc')
                        this.changeState(true,this.form);
                        this.$message({
                            message: '登陆成功，欢迎使用大象招聘系统！',
                            type: 'success'
                        });
                    }else {
                        this.$cookie.delete('token');
                        this.message = "用户名或密码错误";
                    }
                }
            },
            ...mapActions({
                changeState:'changeLoginState'
            })
        },
        created(){
            if(this.$cookie.get('token')){
                this.changeState(true);
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
    .login
        .message
            padding-right: 10px
            color #FF4949
        .login-form
            width: 450px
</style>